<template>
  <div class="container">
    <div class="header"><h1>创建活动</h1></div>
    <div class="center">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动封面">
          <el-upload
              ref="upload"
              class="avatar-uploader"
              list-type="picture-card"
              action="#"
              :auto-upload="false"
              :http-request="uploadHttpRequest"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="uploadData.activityName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="创建组织"><el-input v-model="form.createzuzhi"></el-input></el-form-item> -->
        <el-form-item label="负责人"><span>{{ uploadData.userName }}</span></el-form-item>
        <el-form-item label="联系电话"><span>{{ phone }}</span></el-form-item>
        <el-form-item label="活动人数">
          <el-select v-model="uploadData.activityPeopleMaxNum" placeholder="请选择活动人数">
            <el-option label="10人" value="10"></el-option>
            <el-option label="20人" value="20"></el-option>
            <el-option label="50人" value="50"></el-option>
            <el-option label="100人" value="100"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-cascader
              size="large"
              :options="cityoptions"
              v-model="selectedOptions">
          </el-cascader>
        </el-form-item>
        <el-form-item label="具体地点">
          <el-input type="textarea" v-model="uploadData.activityAddress"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
              v-model="value"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:00:00']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="活动介绍">
          <el-input type="textarea" v-model="uploadData.activityDetail"></el-input>
        </el-form-item>
        <el-form-item label="活动主题">
          <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新的标签</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="chuangjian" type="primary" @click="submitUpload">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="">

    </div>
  </div>
</template>

<script>
import {request} from '../api/axios.js';
import axios from 'axios';
import {CodeToText, regionData} from "element-china-area-data";

export default {
  name: 'Creatingactivities',
  // 	data() {
  // 		return {
  // dynamicTags: [],
  // inputVisible: false,
  // inputValue: '',
  // form: {
  // 	name: '',
  // 	region: '',
  // 	people: '',
  // 	date1: '',
  // 	date2: '',
  // 	delivery: false,
  // 	type: [],
  // 	resource: '',
  // 	desc: ''
  // }
  // 		};
  // 	},
  // 	methods: {
  // 		onSubmit() {
  // 			alert('创建活动成功！');
  // 			this.$router.push('/changeinformation');
  // 		},
  // handleClose(tag) {
  // 	this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
  // },

  // showInput() {
  // 	this.inputVisible = true;
  // 	this.$nextTick(() => {
  // 		this.$refs.saveTagInput.$refs.input.focus();
  // 	});
  // },

  // handleInputConfirm() {

  // 	let inputValue = this.inputValue;
  // 	if (inputValue) {
  // 		this.dynamicTags.push(inputValue);
  // 	}
  // 	this.inputVisible = false;
  // 	this.inputValue = '';
  // }
  // 	}
  // };
  data() {
    return {
      // 城市级联选择
      cityoptions: regionData,
      selectedOptions: [],
      phone: '',
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      form: {
        name: '',
        region: '',
        people: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      imageUrl: '',
      value: [],

      uploadData: {
        userName: '',
        activityName: '',
        activityPeopleMaxNum: '',
        activityProvince: '',
        activityCity: '',
        activityDistrict: '',
        activityAddress: '',
        activityBeginTime: '',
        activityEndTime: '',
        activityTag: '',
        activityDetail: ''
      }
    };
  },
  watch: {
    selectedOptions() {
      if (this.selectedOptions.length === 3) {
        this.uploadData.activityProvince = CodeToText[this.selectedOptions[0]]
        this.uploadData.activityCity = CodeToText[this.selectedOptions[1]]
        this.uploadData.activityDistrict = CodeToText[this.selectedOptions[2]]
      }
      if (this.selectedOptions.length === 2) {
        this.uploadData.activityProvince = CodeToText[this.selectedOptions[0]]
        this.uploadData.activityCity = CodeToText[this.selectedOptions[1]]
        this.uploadData.activityDistrict = ''
      }
      if (this.selectedOptions.length === 1) {
        this.uploadData.activityProvince = CodeToText[this.selectedOptions[0]]
        this.uploadData.activityCity = ''
        this.uploadData.activityDistrict = ''
      }

    },

    value() {
      this.uploadData.activityBeginTime = this.value[0];
      this.uploadData.activityEndTime = this.value[1];
    }
  },
  created() {
    this.getmessage();
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
      this.uploadData.activityTag = this.dynamicTags[0]
      console.log(this.uploadData.activityTag)
    },
    getmessage() {
      setTimeout(() => {
        console.log(this.$store.state.userInfo);
        request({
          url: '/v1/users/getinfo',
          method: 'post',
          data: {
            userName: this.$store.state.userInfo.userName
          }
        }).then(res => {
          this.uploadData.userName = res.data.data.user_name;
          this.phone = res.data.data.phone;
          console.log(res.data.data);
          console.log(this.uploadData);
        });
      }, 600);
    },
    // 上传文件及其附带参数
    uploadHttpRequest(param) {
      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('activityCover', param.file); //添加文件对象
      formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
      // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/activities/createactivity'; //上传地址
      let uploadUrl = 'http://localhost:8000/v1/activities/createactivity';
      axios.post(uploadUrl, formData).then(res => {
        console.log(res);
        console.log(this.uploadData)
        if (res.data.success) {
          alert(res.data.success)
        } else {
          alert(res.data.error)
        }
      });
    },
    // 触发上传文件函数
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 上传成功的回调
    handleAvatarSuccess(res, file) {
      console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传之前的判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
}

.header{
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  background-image: linear-gradient(to right bottom,  lightgreen, cornflowerblue);
}

.center h1 {
  color: #637381;
  margin-left: 46%;
  margin-top: 3rem;
  font-family: Lato, Arial, sans-serif;
}

.el-form {
  margin: auto;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  width: 60rem;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.chuangjian {
  background-color: #25b864;
}
</style>
